<template>
  <u-popup :show="show" mode="bottom" :round="20" :closeable="true" @close="handleClose">
    <view class="publish-modal">
      <view class="modal-header">
        <text class="modal-title">选择发布类型</text>
      </view>
      
      <view class="modal-body">
        <view class="publish-option demand-option" @click="handlePublishDemand">
          <view class="option-icon demand-icon">
            <u-icon name="list" size="24" color="#ffffff" />
          </view>
          <view class="option-content">
            <text class="option-title">发布需求</text>
            <text class="option-desc">快速匹配服务商</text>
          </view>
          <u-icon name="arrow-right" size="16" color="#9ca3af" />
        </view>
        
        <view class="publish-option service-option" @click="handlePublishService">
          <view class="option-icon service-icon">
            <u-icon name="bag" size="24" color="#ffffff" />
          </view>
          <view class="option-content">
            <text class="option-title">发布服务</text>
            <text class="option-desc">展示服务能力</text>
          </view>
          <u-icon name="arrow-right" size="16" color="#9ca3af" />
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close'])

// 关闭弹框
const handleClose = () => {
  emit('close')
}

// 发布需求
const handlePublishDemand = () => {
  handleClose()
  uni.navigateTo({ url: '/pages/yjyny/publish/demand' })
}

// 发布服务
const handlePublishService = () => {
  handleClose()
  uni.navigateTo({ url: '/pages/yjyny/publish/service' })
}
</script>

<style scoped lang="scss">
.publish-modal {
  padding: 40rpx;
  background-color: #ffffff;
}

.modal-header {
  margin-bottom: 32rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: var(--text-primary);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.publish-option {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 32rpx;
  background-color: #ffffff;
  border: 2rpx solid #f3f4f6;
  border-radius: 24rpx;
  transition: all 0.3s ease;
}

.publish-option:active {
  background-color: #f9fafb;
  border-color: var(--color-primary);
}

.option-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demand-icon {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.service-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.option-title {
  font-size: 30rpx;
  font-weight: bold;
  color: var(--text-primary);
}

.option-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
}
</style>

